Visualizing different types of errors that can occur in JavaScript.
The base constructor for all other error objects. It is thrown when a general runtime error occurs.
try {
throw new Error('Something went wrong!');
} catch (e) {
console.log(e.name); // 'Error'
}
This is a general-purpose alarm. When something unexpected happens, this bell rings.
A new type of error that represents multiple errors. It is typically thrown when a Promise.any() operation fails because all promises rejected.
Promise.any([
Promise.reject(new Error('One failed')),
Promise.reject(new Error('Two failed'))
]).catch(e => {
console.log(e.errors); // Array of errors
});
Imagine a team's project failing because every single member made a mistake. AggregateError bundles all those individual failures together.
Thrown when a global `eval()` function encounters an error. This error type is rarely used in modern JavaScript and is mainly for historical purposes.
try {
eval('throw new EvalError("Eval problem!")');
} catch (e) {
console.log(e.name); // 'EvalError'
}
An `eval()` call is like a box that can be dangerous. An `EvalError` is the box shouting that it received bad instructions.
Thrown when a number is outside of an allowed range. This can happen when an array has a negative length, or a number is passed to a function that requires a specific range.
new Array(-1); // RangeError: Invalid array length
The "safe zone" for a value is shown in green. Trying to go outside that zone triggers a `RangeError`.
Thrown when a variable that does not exist is referenced. This is a common bug caused by typos or trying to access a variable outside of its scope.
console.log(undeclaredVar); // ReferenceError: undeclaredVar is not defined
A `ReferenceError` occurs when you try to open a door to a room that doesn't exist. The program gets lost and stops.
Thrown when an error occurs during an asynchronous operation that also has another error. For example, if a `finally` block throws an error after a `try` block has already failed.
try {
throw new Error('Primary failure');
} finally {
throw new Error('Cleanup failed'); // This becomes the suppressed error
}
This is like trying to put out a fire (primary error) but accidentally spilling gasoline (suppressed error). The SuppressedError holds onto the original error.
🔥 Fire started!
💧 Water hose broke!
Thrown when the JavaScript engine encounters code that does not follow the correct syntax rules, such as a missing parenthesis or semicolon.
let x = {; // SyntaxError: Unexpected token ';'
A `SyntaxError` is a grammatical mistake in your code. The engine can't even begin to understand it, so it flags the error immediately.
Thrown when an operation is performed on a value that is of an incorrect data type. For example, trying to call a non-function or access a property on an undefined value.
const x = 10; x(); // TypeError: x is not a function
A `TypeError` occurs when you try to use a tool for the wrong job. The tool (the value) and the job (the operation) don't match.
Thrown when an invalid URI is passed to a URI-related function like `decodeURIComponent()` or `decodeURI()`. This indicates a malformed string.
decodeURIComponent('%'); // URIError: URI malformed
A `URIError` is a bad address. The decoder can't find its way and gets confused because the address is unreadable.
Indicates that an error occurred in the JavaScript engine itself. This is typically a very rare and serious issue, like stack overflow from deep recursion. It is non-standard and not available in all browsers.
function recurse() {
recurse();
}
// This will eventually cause an InternalError (Stack Overflow)
An `InternalError` is a sign that the engine's gears have seized up. It's a deep, core problem, not a simple coding mistake.